<template>
    <div class="card" style="margin: 8px 0;" v-if="payInfo.item.captcha">
        <div class="flex align-center mx-8">
            <div style="margin-right: 16px;">
                {{ payInfo.item.captcha.captchaTitle }}：<span class="red">{{ payInfo.item.captcha.captcha
                    }}</span>
            </div>
            <Button @click="onCopy(payInfo.item.captcha.captcha)" size="small" icon="description"></Button>
        </div>
        <div class="mx-8" v-html="payInfo.item.captcha.captchaDescribe"></div>
    </div>
</template>

<script setup lang="ts">
import { Icon, Button, Popup, Loading, showNotify, Field, CellGroup, Form as VanForm } from "vant";

defineProps({
    payInfo: {
        type: Object,
        default: () => ({})
    }
});
function onCopy(content: string | number) {
    navigator.clipboard.writeText(String(content)).then(() => {
        // 复制成功
        showNotify({ type: 'success', message: '复制成功' })
    }).catch(() => {
        // 复制失败
        showNotify({ type: 'danger', message: '复制失败' })
    })
}
</script>